<template>
	<q-search v-model="searchParams" :config="searchConfig">
		<template #slotInterface="{ row }">
			<el-form-item label="插槽：" label-width="94px">
				<el-input
					v-model="tableConfig.searchParams[row.key]"
					placeholder="我是一个插槽，可自定我"
				/>
			</el-form-item>
		</template>
	</q-search>
	<q-table ref="commonTable" :config="tableConfig" />
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { rulePageApi, queryUserRolesApi } from './api';
	import { searchForm, tableColumns, globalOperate, operate } from './config';
	import { tableList } from './mock';
	const commonTable = ref(null);
	const searchParams = ref({});
	const searchConfig = ref({
		labelWidth: 94,
		handlerSearch({ params, type }) {
			console.log('data,', params, type);
			return commonTable.value.fetchData({ isResetPageNumber: true });
		},
		handleCollapse() {
			return commonTable.value.onResize();
		},
		// 配置表头内容
		formConfigList: searchForm,
	});
	const tableConfig = ref({
		searchParams: {},
		operateWidth: 160,
		pageSize: 100,
		isCollapseOperate: true,
		rolesApiMethod: queryUserRolesApi,
		responseRolesHandler: payload => {
			const userRoleList = [];
			payload.forEach(({ roleNo }) => {
				userRoleList.push(roleNo);
			});
			return userRoleList;
		},
		reqApiMethod: rulePageApi,
		// reqApiMethod: () => {
		// 	return new Promise(resolve => {
		// 		resolve({
		// 			data:tableList ,
		// 		});
		// 	});
		// },
		responseHandler: payload => {
			console.log('payload', payload);
			return {
				records: payload?.blackNameUploadRecords || [],
				total: payload?.count || 0,
			};
		},
		//格式化接口参数
		queryParams: payload => {
			const { pageNo, pageSize } = payload;
			console.log('payload==queryParams', payload);
			const params = {
				activityCode: 'DIS_ACT_DLAM_PARTNER_AGENT',
				pageNo,
				pageSize,
			};
			return params;
		},
		handlerOperate: async (payload, row) => {
			console.log(payload, row[0]);
			switch (payload.butType) {
				case 'BATCH':
					console.log('row', row);
					console.log('批量');
					break;
				case 'CREATE':
					console.log('新增');
					break;
				case 'LOOK':
					console.log('查看指标口径');
					break;
				case 'PASS':
					console.log('通过');
					break;
				case 'REFUSE':
					console.log('拒绝');
					break;
				case 'PASS1':
					console.log('通过1');
					break;
				case 'REFUSE1':
					console.log('拒绝1');
					break;
			}
		},
		columns: tableColumns,
		// 全局按钮配置
		globalOperate: globalOperate,
		operate: operate,
		customColumnsKey: 'Example',
		sortChange: payload => {
			console.log('payload===', payload);
		},
	});
</script>
<style lang="scss">
	.wrapper {
		padding: 20px;
	}
</style>
